<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">
                首页</el-breadcrumb-item
            >
            <el-breadcrumb-item :to="{ path: '/page' }">
                权限管理</el-breadcrumb-item
            >
            <el-breadcrumb-item :to="{ path: '/roles' }"
                >角色管理</el-breadcrumb-item
            >
            <el-breadcrumb-item>角色授权</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <el-affix :offset="80">
                <el-button type="primary">菜单、操作</el-button>
                <el-button type="warning">权限组</el-button>
                <el-button type="success">权限节点</el-button>
            </el-affix>
            <el-alert :title="pageTitle" type="success" />
            <el-tabs v-model="activeName">
                <el-tab-pane label="按页面授权" name="first">
                    <el-tree
                        ref="pageTreeNode"
                        :data="pageTree"
                        :props="pageProps"
                        node-key="id"
                        show-checkbox
                        :render-content="renderContent"
                    />
                    <el-button type="primary" @click="savePageAuth">
                        保存
                    </el-button>
                </el-tab-pane>
                <el-tab-pane label="按权限组授权" name="second">
                    <el-tree
                        ref="groupTreeNode"
                        :data="groupTree"
                        :props="groupProps"
                        node-key="id"
                        show-checkbox
                        :render-content="renderContent"
                    />
                    <el-button type="primary" @click="saveGroupAuth">
                        保存
                    </el-button>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script>
import requestApis from '@/request'
export default {
    data () {
        return {
            activeName: 'first',
            pageTitle: '',
            info: [],
            pageTree: [],
            pageProps: {
                children: 'children',
                label: 'title'
            },
            groupTree: [],
            groupProps: {
                children: 'children',
                label: 'name'
            },
            subData: {
                id: 0,
                apis_list: []
            }
        }
    },
    created () {
        this.getGroupTree()
        this.getRouterTree()
        this.getRow(this.$route.query.id)
    },
    methods: {
        getRow (id) {
            requestApis.getRolesRow({ id }).then(res => {
                if (res.meta.code === 1) {
                    this.info = res.data
                    this.pageTitle = '【' + res.data.name + '】角色进行授权'
                    this.subData.id = id
                } else {
                    this.$message({
                        message: res.meta.msg,
                        type: 'warning'
                    })
                    this.$router.push('/admin')
                }
            }).catch(error => {
                console.log(error)
            })
        },
        savePageAuth () {
            this.$confirm('授权成功后此菜单原有权限将被清空, 此操作为敏感操作是否继续?', '授权确认', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var nodeList = this.$refs.pageTreeNode.getCheckedNodes()
                this.subData.apis_list = []
                nodeList.forEach(item => {
                    if (item.apis_id > 0) {
                        this.subData.apis_list.push(item.apis_id)
                    }
                })
                this.subAuthData()
            }).catch((res) => {
                console.error('确认框反馈', res)
                this.$message({
                    type: 'info',
                    message: '已取消授权'
                })
            })
        },
        saveGroupAuth () {
            this.$confirm('授权成功后此权限组原有权限将被清空, 此操作为敏感操作是否继续?', '授权确认', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var nodeList = this.$refs.groupTreeNode.getCheckedNodes()
                this.subData.apis_list = []
                nodeList.forEach(item => {
                    if (item.class_type === 'node') {
                        this.subData.apis_list.push(item.id)
                    }
                })
                this.subAuthData()
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消授权'
                })
            })
        },
        subAuthData () {
            if (this.subData.apis_list.length > 0) {
                this.subData.apis_list = this.subData.apis_list.join(',')
                console.log(this.subData.apis_list)
                requestApis.saveRolesPower(this.subData).then(res => {
                    if (res.meta.code === 1) {
                        this.$message({
                            type: 'success',
                            message: '授权成功'
                        })
                        this.$router.back()
                    } else {
                        this.$message({
                            message: res.meta.msg,
                            type: 'warning'
                        })
                        this.$router.push('/admin')
                    }
                }).catch(error => {
                    console.log(error)
                })
            } else {
                this.$message({
                    type: 'info',
                    message: '请选择权限'
                })
            }
        },
        getGroupTree () {
            requestApis.getGroupPowerAll(this.form_data).then(res => {
                if (res.meta.code === 1) {
                    this.groupTree = res.data
                } else {
                    this.$message({
                        message: res.meta.msg,
                        type: 'warning'
                    })
                }
            }).catch(error => {
                console.log(error)
            })
        },
        getRouterTree () {
            requestApis.getTreeMenuAll(this.form_data).then(res => {
                if (res.meta.code === 1) {
                    this.pageTree = res.data
                } else {
                    this.$message({
                        message: res.meta.msg,
                        type: 'warning'
                    })
                }
            }).catch(error => {
                console.log(error)
            })
        },
        renderContent (h, { node, data, store }) {
            return h('div', {
                class: 'node-row'
            },
                [
                    h(
                        'Button',
                        {
                            class: ['custom-tree-node', data.class_type]
                        }, data.title)
                ]
            )
        },
        handleNodeClick (data) {
            console.log(data)
        }
    }
}
</script>
<style>
.el-alert {
    margin: 15px;
}
.el-tree-node__content {
    height: 46px;
}
.custom-tree-node {
    border-radius: 5px;
    border: none;
    color: #fff;
    font-weight: 500;
    padding: 6px;
}
.menu {
    background-color: #409eff;
}
.group {
    background-color: #e6a23c;
}
.node {
    background-color: #67c23a;
}
</style>
